<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旅游规划助手</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        }
        
        body {
            background-color: #f5f5f5;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }
        
        .travel-planner {
            width: 100%;
            max-width: 360px;
            background-color: white;
            border-radius: 20px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            position: relative;
            height: 600px;
            display: flex;
            flex-direction: column;
        }
        
        .header {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 15px;
            font-size: 18px;
            font-weight: bold;
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
        }
        
        .form-container {
            padding: 20px;
            overflow-y: auto;
            flex: 1;
        }
        
        .form-group {
            margin-bottom: 15px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-size: 14px;
            color: #333;
        }
        
        .date-range {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .date-input {
            width: 45%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 14px;
        }
        
        .date-separator {
            font-size: 14px;
            color: #666;
        }
        
        .text-input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 14px;
        }
        
        .radio-group {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
        }
        
        .radio-option {
            display: flex;
            align-items: center;
        }
        
        .radio-option input[type="radio"] {
            margin-right: 5px;
        }
        
        .checkbox-group {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }
        
        .checkbox-option {
            display: flex;
            align-items: center;
        }
        
        .checkbox-option input[type="checkbox"] {
            margin-right: 5px;
        }
        
        .budget-options {
            display: flex;
            justify-content: space-between;
        }
        
        .budget-option {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 30%;
        }
        
        .budget-label {
            font-size: 14px;
            margin-bottom: 5px;
        }
        
        .budget-value {
            font-size: 12px;
            color: #666;
        }
        
        .special-requests {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            height: 80px;
            resize: none;
            font-size: 14px;
        }
        
        .submit-btn {
            width: 100%;
            padding: 15px;
            background-color: #ff4757;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            margin-top: 15px;
        }
        
        .submit-btn:hover {
            background-color: #ff6b81;
        }
        
        /* 聊天界面样式 */
        .chat-container {
            display: flex;
            flex-direction: column;
            height: 100%;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background-color: white;
            z-index: 10;
        }
        
        .chat-header {
            display: flex;
            align-items: center;
            padding: 15px;
            background-color: #333;
            color: white;
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
        }
        
        .back-btn {
            background: none;
            border: none;
            color: white;
            font-size: 14px;
            cursor: pointer;
            padding: 5px 10px;
            margin-right: 10px;
            border-radius: 4px;
            border: 1px solid rgba(255,255,255,0.3);
        }
        
        .chat-title {
            flex: 1;
            text-align: center;
            font-size: 18px;
            font-weight: bold;
        }
        
        .chat-messages {
            flex: 1;
            overflow-y: auto;
            padding: 15px;
            background-color: #f5f5f5;
        }
        
        .message {
            margin-bottom: 15px;
            max-width: 80%;
            clear: both;
        }
        
        .user-message {
            float: right;
        }
        
        .assistant-message {
            float: left;
        }
        
        .message-content {
            padding: 10px 15px;
            border-radius: 18px;
            font-size: 14px;
            line-height: 1.5;
            word-break: break-word;
        }
        
        .user-message .message-content {
            background-color: #ff4757;
            color: white;
            border-top-right-radius: 4px;
        }
        
        .assistant-message .message-content {
            background-color: white;
            color: #333;
            border-top-left-radius: 4px;
            box-shadow: 0 1px 2px rgba(0,0,0,0.1);
        }
        
        .chat-input {
            display: flex;
            padding: 10px 15px;
            background-color: white;
            border-top: 1px solid #eee;
        }
        
        .message-input {
            flex: 1;
            padding: 10px 15px;
            border: 1px solid #ddd;
            border-radius: 20px;
            font-size: 14px;
            margin-right: 10px;
        }
        
        .send-btn {
            background-color: #ff4757;
            color: white;
            border: none;
            border-radius: 20px;
            padding: 0 20px;
            font-size: 14px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="travel-planner" id="travelPlanner">
        <div class="header">旅游规划助手</div>
        <div class="form-container" id="formContainer">
                <div class="form-group">
                    <label>旅游日期</label>
                    <div class="date-range">
                        <input type="text" class="date-input" placeholder="yyyy/mm/日" id="startDate">
                        <span class="date-separator">至</span>
                        <input type="text" class="date-input" placeholder="yyyy/mm/日" id="endDate">
                    </div>
                </div>
                
                <div class="form-group">
                    <label>旅游人数</label>
                    <input type="text" class="text-input" placeholder="1人（包含自描述）" id="peopleCount">
                </div>
                
                <div class="form-group">
                    <label>酒店位置偏好</label>
                    <div class="radio-group">
                        <div class="radio-option">
                            <input type="radio" name="location" id="cityCenter" checked>
                            <label for="cityCenter">市中心区域</label>
                        </div>
                        <div class="radio-option">
                            <input type="radio" name="location" id="scenicArea">
                            <label for="scenicArea">园林景区附近</label>
                        </div>
                        <div class="radio-option">
                            <input type="radio" name="location" id="trafficHub">
                            <label for="trafficHub">交通枢纽区域</label>
                        </div>
                        <div class="radio-option">
                            <input type="radio" name="location" id="specialArea">
                            <label for="specialArea">特色古镇区域</label>
                        </div>
                    </div>
                </div>
                
                <div class="form-group">
                    <label>酒店预算</label>
                    <div class="budget-options">
                        <div class="budget-option">
                            <div class="budget-label">
                                <input type="radio" name="budget" id="economyBudget" checked>
                                <label for="economyBudget">经济型</label>
                            </div>
                            <div class="budget-value">¥300以下/晚</div>
                        </div>
                        <div class="budget-option">
                            <div class="budget-label">
                                <input type="radio" name="budget" id="comfortBudget">
                                <label for="comfortBudget">舒适型</label>
                            </div>
                            <div class="budget-value">¥300-600/晚</div>
                        </div>
                        <div class="budget-option">
                            <div class="budget-label">
                                <input type="radio" name="budget" id="luxuryBudget">
                                <label for="luxuryBudget">高档型</label>
                            </div>
                            <div class="budget-value">¥600以上/晚</div>
                        </div>
                    </div>
                </div>
                
                <div class="form-group">
                    <label>感兴趣的景点类型（可多选）</label>
                    <div class="checkbox-group">
                        <div class="checkbox-option">
                            <input type="checkbox" id="ancientGardens" checked>
                            <label for="ancientGardens">古典园林</label>
                        </div>
                        <div class="checkbox-option">
                            <input type="checkbox" id="historicalSites" checked>
                            <label for="historicalSites">历史古迹</label>
                        </div>
                        <div class="checkbox-option">
                            <input type="checkbox" id="waterScenery">
                            <label for="waterScenery">水乡古镇</label>
                        </div>
                        <div class="checkbox-option">
                            <input type="checkbox" id="artExperience" checked>
                            <label for="artExperience">美食体验</label>
                        </div>
                        <div class="checkbox-option">
                            <input type="checkbox" id="culturalSites">
                            <label for="culturalSites">文化体验</label>
                        </div>
                        <div class="checkbox-option">
                            <input type="checkbox" id="naturalScenery">
                            <label for="naturalScenery">自然风光</label>
                        </div>
                    </div>
                </div>
                
                <div class="form-group">
                    <label>其他需求或特殊要求</label>
                    <textarea class="special-requests" placeholder="例如：希望行程轻松一些，避开人流高峰，有老人小孩同行需要特殊安排等" id="specialRequests"></textarea>
                </div>
                
                <button type="button" class="submit-btn" id="generatePlan">生成我的专属旅游规划</button>
            </form>
        </div>
        <!-- 对话框界面 -->
        <div class="chat-container" id="chatContainer" style="display: none;">
            <div class="chat-header">
                <button class="back-btn" id="backToForm">返回</button>
                <div class="chat-title">旅游规划对话</div>
            </div>
            <div class="chat-messages" id="chatMessages">
                <!-- 消息将在这里动态添加 -->
            </div>
            <div class="chat-input">
                <input type="text" id="userMessage" placeholder="输入您的问题..." class="message-input">
                <button id="sendMessage" class="send-btn">发送</button>
            </div>
        </div>
    </div>

    <script>
        // 表单和对话框切换
        const travelPlanner = document.getElementById('travelPlanner');
        const formContainer = document.getElementById('formContainer');
        const chatContainer = document.getElementById('chatContainer');
        const backToFormBtn = document.getElementById('backToForm');
        const chatMessages = document.getElementById('chatMessages');
        const userMessageInput = document.getElementById('userMessage');
        const sendMessageBtn = document.getElementById('sendMessage');
        
        // 存储表单数据
        let formDataGlobal = {};
        
        // 生成旅游规划
        document.getElementById('generatePlan').addEventListener('click', function() {
            // 收集表单数据
            formDataGlobal = {
                dateRange: {
                    start: document.getElementById('startDate').value,
                    end: document.getElementById('endDate').value
                },
                peopleCount: document.getElementById('peopleCount').value,
                location: document.querySelector('input[name="location"]:checked').id,
                budget: document.querySelector('input[name="budget"]:checked').id,
                interests: [
                    document.getElementById('ancientGardens').checked ? 'ancientGardens' : null,
                    document.getElementById('historicalSites').checked ? 'historicalSites' : null,
                    document.getElementById('waterScenery').checked ? 'waterScenery' : null,
                    document.getElementById('artExperience').checked ? 'artExperience' : null,
                    document.getElementById('culturalSites').checked ? 'culturalSites' : null,
                    document.getElementById('naturalScenery').checked ? 'naturalScenery' : null
                ].filter(Boolean),
                specialRequests: document.getElementById('specialRequests').value
            };
            
            console.log('表单数据:', formDataGlobal);
            
            // 切换到对话界面
            formContainer.style.display = 'none';
            chatContainer.style.display = 'block';
            
            // 生成初始回复
            generateInitialResponse();
        });
        
        // 返回表单
        backToFormBtn.addEventListener('click', function() {
            chatContainer.style.display = 'none';
            formContainer.style.display = 'block';
        });
        
        // 发送消息
        sendMessageBtn.addEventListener('click', sendUserMessage);
        userMessageInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                sendUserMessage();
            }
        });
        
        function sendUserMessage() {
            const message = userMessageInput.value.trim();
            if (message) {
                // 添加用户消息到对话
                addMessage('user', message);
                userMessageInput.value = '';
                
                // 模拟AI回复
                setTimeout(() => {
                    generateResponse(message);
                }, 1000);
            }
        }
        
        function addMessage(sender, text) {
            const messageDiv = document.createElement('div');
            messageDiv.className = `message ${sender}-message`;
            
            // 处理文本中的换行和Markdown格式
            const formattedText = formatText(text);
            
            messageDiv.innerHTML = `
                <div class="message-content">${formattedText}</div>
            `;
            
            chatMessages.appendChild(messageDiv);
            chatMessages.scrollTop = chatMessages.scrollHeight;
        }
        
        function formatText(text) {
            // 处理换行
            let formatted = text.replace(/\n/g, '<br>');
            
            // 处理Markdown加粗 **文本**
            formatted = formatted.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
            
            // 处理Markdown斜体 *文本*
            formatted = formatted.replace(/\*(.*?)\*/g, '<em>$1</em>');
            
            return formatted;
        }
        
        function generateInitialResponse() {
            // 显示加载中
            addMessage('assistant', '正在为您生成旅游规划，请稍候...');
            
            // 模拟加载时间
            setTimeout(() => {
                // 获取表单数据的可读版本
                const locationMap = {
                    'cityCenter': '市中心区域',
                    'scenicArea': '园林景区附近',
                    'trafficHub': '交通枢纽区域',
                    'specialArea': '特色古镇区域'
                };
                
                const budgetMap = {
                    'economyBudget': '经济型 (¥300以下/晚)',
                    'comfortBudget': '舒适型 (¥300-600/晚)',
                    'luxuryBudget': '高档型 (¥600以上/晚)'
                };
                
                const interestsMap = {
                    'ancientGardens': '古典园林',
                    'historicalSites': '历史古迹',
                    'waterScenery': '水乡古镇',
                    'artExperience': '美食体验',
                    'culturalSites': '文化体验',
                    'naturalScenery': '自然风光'
                };
                
                // 计算旅行天数
                let days = 3; // 默认3天
                if (formDataGlobal.dateRange.start && formDataGlobal.dateRange.end) {
                    const startDate = new Date(formDataGlobal.dateRange.start);
                    const endDate = new Date(formDataGlobal.dateRange.end);
                    if (!isNaN(startDate) && !isNaN(endDate)) {
                        const diffTime = Math.abs(endDate - startDate);
                        days = Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 1;
                    }
                }
                
                // 根据兴趣生成景点推荐
                const attractions = [];
                if (formDataGlobal.interests.includes('ancientGardens')) {
                    attractions.push('拙政园', '留园', '网师园');
                }
                if (formDataGlobal.interests.includes('historicalSites')) {
                    attractions.push('虎丘', '苏州博物馆', '平江路历史街区');
                }
                if (formDataGlobal.interests.includes('waterScenery')) {
                    attractions.push('周庄古镇', '同里古镇', '木渎古镇');
                }
                if (formDataGlobal.interests.includes('artExperience')) {
                    attractions.push('松鹤楼', '得月楼', '同得兴面馆');
                }
                if (formDataGlobal.interests.includes('culturalSites')) {
                    attractions.push('昆曲博物馆', '丝绸博物馆', '评弹博物馆');
                }
                if (formDataGlobal.interests.includes('naturalScenery')) {
                    attractions.push('太湖', '金鸡湖', '石湖');
                }
                
                // 随机选择景点组成行程
                const shuffled = attractions.sort(() => 0.5 - Math.random());
                const selectedAttractions = shuffled.slice(0, Math.min(days * 3, shuffled.length));
                
                // 根据预算推荐酒店
                let hotels = [];
                if (formDataGlobal.budget === 'economyBudget') {
                    hotels = ['如家酒店', '7天连锁酒店', '格林豪泰'];
                } else if (formDataGlobal.budget === 'comfortBudget') {
                    hotels = ['全季酒店', '桔子酒店', '锦江之星品尚'];
                } else {
                    hotels = ['苏州香格里拉大酒店', '苏州W酒店', '苏州尼盛万丽酒店'];
                }
                
                // 根据位置偏好筛选
                let locationDesc = '';
                if (formDataGlobal.location === 'cityCenter') {
                    locationDesc = '市中心观前街商圈';
                } else if (formDataGlobal.location === 'scenicArea') {
                    locationDesc = '拙政园/狮子林景区附近';
                } else if (formDataGlobal.location === 'trafficHub') {
                    locationDesc = '苏州火车站/汽车站附近';
                } else {
                    locationDesc = '平江路/山塘街历史街区';
                }
                
                // 生成行程安排
                let itinerary = `根据您的偏好，我为您定制了${days}天的苏州旅游行程：\n\n`;
                
                // 添加酒店推荐
                itinerary += `🏨 **住宿推荐**\n`;
                itinerary += `为您推荐${locationDesc}的${hotels[0]}或${hotels[1]}。\n\n`;
                
                // 添加每日行程
                for (let i = 0; i < days && i < 5; i++) { // 最多显示5天
                    itinerary += `📅 **第${i+1}天行程**\n`;
                    const dayAttractions = selectedAttractions.slice(i*3, (i+1)*3);
                    if (dayAttractions.length > 0) {
                        itinerary += `上午：${dayAttractions[0] || '自由活动'}\n`;
                        itinerary += `中午：品尝当地特色美食\n`;
                        itinerary += `下午：${dayAttractions[1] || '自由活动'}\n`;
                        itinerary += `晚上：${dayAttractions[2] || '自由活动'}\n\n`;
                    } else {
                        itinerary += `今日为自由活动日，您可以根据自己的兴趣自由安排。\n\n`;
                    }
                }
                
                // 添加特殊要求回应
                if (formDataGlobal.specialRequests) {
                    itinerary += `🌟 **关于您的特殊要求**\n`;
                    itinerary += `"${formDataGlobal.specialRequests}"\n\n`;
                    itinerary += `我们已将您的特殊要求纳入考虑，上述行程安排较为轻松，景点之间留有充足休息时间。\n\n`;
                }
                
                itinerary += `您可以继续向我咨询关于行程的任何问题，例如具体景点信息、交通方式、当地美食推荐等。`;
                
                // 删除加载消息并添加生成的行程
                chatMessages.removeChild(chatMessages.lastChild);
                addMessage('assistant', itinerary);
            }, 2000);
        }
        
        function generateResponse(userQuery) {
            // 简单的关键词匹配响应系统
            const query = userQuery.toLowerCase();
            let response = '';
            
            if (query.includes('交通') || query.includes('怎么去')) {
                response = `苏州市内交通便捷，主要景点之间可以通过：\n\n1. 地铁：苏州目前有4条地铁线路，覆盖主要景区和商业区。\n2. 公交车：覆盖面广，票价1-2元。\n3. 出租车：起步价约12元。\n4. 共享单车：市区内随处可见，适合短途出行。\n\n从上海到苏州可以乘坐高铁（约30分钟）或城际列车（约1小时）。`;
            } 
            else if (query.includes('美食') || query.includes('吃什么')) {
                response = `苏州美食推荐：\n\n1. 松鹤楼的松鼠桂鱼\n2. 同得兴的面条\n3. 朱鸿兴的阳澄湖大闸蟹\n4. 老苏州茶点（如桂花糖藕、核桃酥）\n5. 碧螺春茶\n6. 东山白毛茶\n7. 苏式月饼\n\n这些都是非常地道的苏州特色美食，值得一试！`;
            }
            else if (query.includes('景点') || query.includes('哪里好玩')) {
                response = `苏州必游景点：\n\n1. 园林类：拙政园、留园、网师园、环秀山庄、狮子林\n2. 古镇类：周庄、同里、木渎、甪直\n3. 历史街区：平江路、山塘街、七里山塘\n4. 现代景点：金鸡湖、诚品书店、苏州中心\n5. 博物馆：苏州博物馆、丝绸博物馆、昆曲博物馆\n\n如果时间有限，强烈推荐拙政园、平江路和周庄古镇。`;
            }
            else if (query.includes('购物') || query.includes('买什么')) {
                response = `苏州特色购物推荐：\n\n1. 丝绸制品：苏州是丝绸之府，丝巾、丝绸被面、旗袍等都是不错的选择\n2. 苏绣：精美的刺绣艺术品，价格从几百到几万不等\n3. 碧螺春茶：正宗碧螺春产自太湖洞庭山\n4. 桂花糕：传统苏式糕点\n5. 核雕：苏州传统工艺\n\n购物地点推荐：观前街、平江路、山塘街、金鸡湖诚品生活。`;
            }
            else if (query.includes('天气') || query.includes('什么时候去')) {
                response = `苏州最佳旅游季节是春季（3-5月）和秋季（9-11月），此时天气宜人，园林景色最美。\n\n春季可赏花，特别是3月底的樱花和4月的牡丹；\n夏季较为炎热多雨，但水乡风光别有韵味；\n秋季天高气爽，是游览的黄金季节；\n冬季较冷，但游客少，可以更从容地欣赏园林之美。\n\n建议避开国内主要假期如五一、十一等，以免人流过多影响体验。`;
            }
            else if (query.includes('住宿') || query.includes('酒店')) {
                const budgetMap = {
                    'economyBudget': '经济型酒店如如家、7天、格林豪泰等，价格在200-300元/晚',
                    'comfortBudget': '舒适型酒店如全季、桔子、锦江之星品尚等，价格在300-600元/晚',
                    'luxuryBudget': '高档型酒店如香格里拉、W酒店、尼盛万丽等，价格在600元以上/晚'
                };
                
                const locationMap = {
                    'cityCenter': '市中心观前街商圈，购物便利，距离平江路、拙政园等景点较近',
                    'scenicArea': '拙政园/狮子林景区附近，游览园林景点方便，环境较为安静',
                    'trafficHub': '苏州火车站/汽车站附近，交通便利，适合频繁移动的旅客',
                    'specialArea': '平江路/山塘街历史街区，古色古香，体验老苏州风情'
                };
                
                response = `根据您的预算偏好（${budgetMap[formDataGlobal.budget]}）和位置偏好（${locationMap[formDataGlobal.location]}），以下是住宿建议：\n\n`;
                
                if (formDataGlobal.budget === 'economyBudget') {
                    response += `1. 如家酒店苏州观前街店\n2. 7天连锁酒店苏州平江路店\n3. 格林豪泰苏州火车站北广场商务酒店\n\n这些酒店性价比高，基础设施齐全，位置便利。`;
                } else if (formDataGlobal.budget === 'comfortBudget') {
                    response += `1. 全季酒店苏州观前街店\n2. 桔子酒店·精选苏州平江路店\n3. 苏州山塘街锦江之星品尚酒店\n\n这些酒店环境舒适，服务较好，位置优越。`;
                } else {
                    response += `1. 苏州香格里拉大酒店（金鸡湖畔）\n2. 苏州W酒店（金鸡湖畔）\n3. 苏州尼盛万丽酒店（近平江路）\n4. 苏州诚品酒店（近诚品书店）\n\n这些酒店环境优雅，服务一流，设施齐全。`;
                }
            }
            else {
                response = `感谢您的提问！您想了解关于苏州旅游的哪些方面呢？您可以咨询：\n\n- 具体景点的详细信息\n- 交通方式和建议\n- 当地美食推荐\n- 购物指南\n- 住宿建议\n- 最佳旅游季节\n- 行程调整建议\n\n请告诉我您感兴趣的方面，我会提供更详细的信息。`;
            }
            
            addMessage('assistant', response);
        }
    </script>
</body>
</html>